<template>
  <div class="_flex _flex-space _flex-wrap _p20" v-if="oshiInfo">
    <div class="_cart _p10">
      <el-descriptions title="CPU 信息" :column="4" :border="true">
        <el-descriptions-item
          v-for="(val, key) in oshiInfo.cpu"
          :key="key"
          :label="key"
          >{{ val }}</el-descriptions-item
        >
      </el-descriptions>
    </div>
    <div class="_cart _p10">
      <el-descriptions title="JVM 信息" :column="4" :border="true">
        <el-descriptions-item
          v-for="(val, key) in oshiInfo.jvm"
          :key="key"
          :label="key"
          >{{ val }}</el-descriptions-item
        >
      </el-descriptions>
    </div>
    <div class="_cart _p10">
      <el-descriptions title="内存信息" :column="4" :border="true">
        <el-descriptions-item
          v-for="(val, key) in oshiInfo.mem"
          :key="key"
          :label="key"
          >{{ val }}</el-descriptions-item
        >
      </el-descriptions>
    </div>
    <div class="_cart _p10">
      <el-descriptions title="存储信息" :column="4" :border="true">
        <el-descriptions-item
          v-for="(val, key) in oshiInfo.sysFiles"
          :key="key"
          :label="key"
          >{{ val }}</el-descriptions-item
        >
      </el-descriptions>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      oshiInfo: undefined,
    };
  },
  mounted() {
    this.$comApi.oshi().then((res) => {
      this.oshiInfo = res;
    });
  },
};
</script>

<style></style>
